<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'

import { ref } from 'vue'
import ColorfulStatic from './components/UI/backgroud/ColorfulStatic.vue';
import ColorfulAni from './components/UI/backgroud/ColorfulAni.vue';

// import {
//   ElButton,
//   ElDatePicker,
//   ElNotification,
//   ElOption,
//   ElRadioButton,
//   ElRadioGroup,
//   ElRow,
//   ElSelect,
//   ElSlider,
//   ElSwitch
// } from 'element-plus';

// const radioVal = ref('New York')
// const switchVal = ref(true)
// const sliderVal = ref(50)

const hostname = window.location.hostname; // 获取完整的 URL
// const hostname = "litesite.cn"
// console.log(hostname);

// function onClick() {
//   ElNotification({
//     type: 'success',
//     title: '已成功发送邮件',
//     message: '验证码区分大小写，有效期5分钟',
//     duration: 3000,
//   })
// }
const sites = ref([
  { name: 'NAS', port: 5000, icon: new URL('./assets/nas.svg', import.meta.url).href },
  { name: 'Siyuan', port: 6806, icon: new URL('./assets/siyuan-128.png', import.meta.url).href },
  { name: 'Blog', port: 8090, icon: new URL('./assets/pen.svg', import.meta.url).href },
  { name: 'Jellyfin', port: 1990, icon: new URL('./assets/movie.svg', import.meta.url).href },
  { name: 'Minio', port: 9000, icon: new URL('./assets/minio.svg', import.meta.url).href },
  {name: 'forgejo', port: 3080, icon: new URL('./assets/forgejo.svg', import.meta.url).href},
])
const bg_index = ref(1)

// function onClick() {
//   console.log("click");
//   bg_index.value++;
// }
</script>

<template>
  <ColorfulStatic v-if="0 == bg_index % 2"> 
  </ColorfulStatic>
  <ColorfulAni v-if="1 == bg_index % 2">
  </ColorfulAni>

  <!-- 所有元素都放到这个div中 -->
  <div id="root">
    <!-- <a id="bt" v-on:click="onClick" href="#" class="bt" title=""> 切换背景 </a> -->
  </div>
   
  

  <div id="row_contiainer">
      <div class="logo" v-for="item in sites" :key="item.name">
        <a :href="'http://' + hostname + ':' + item.port" target="_blank" rel="noopener noreferrer" :title="item.name">
          <img :src="item.icon" alt="icon" class="logo_img" />
        </a>
      </div>
   </div>
</template>

<style lang="scss" scoped>
$btn-height: 80px !default;

#bt {
  display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
}

#root {
  // position:fixed;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  // background-color: #007BFF;
}

#row_contiainer {
  position: absolute;
  width: 100%;
  bottom: 0;
  margin-bottom: 15px;

  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  align-items: center;

  gap: 15px;
}

.logo {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease-in-out;
  background-color: #f6f6f6;
}

.logo img {
  width: 40px;
  height: auto;
  margin: 0;
}

.logo:hover {
  transform: scale(1.3);
}
</style>
